<template>
	<view class="">
		<view class="list dis-flex vertical">
			<block v-for="(item , index) in CardList" :key="index">
				<view class="item dis-flex vertical flex-full" @click="Tourl(item.id)">
					<view class="item-img dis-flex flex-bottom flex-center" style="">
						<image :src="item.picture"
							mode=""></image>
					</view>
					<view class="item-body dis-flex vertical flex-full">
						<view class="item-info">
							<view class="item-title">
								{{item.name}}
							</view>
						</view>
						<view class="tags dis-flex flex-middle">
							<view class="tags-title dis-flex flex-middle flex-center">
								可用</view>
							<view class="tags-num dis-flex flex-middle flex-center">{{item.usable}} 次
							</view>
						</view>
						<view class="footer dis-flex flex-middle flex-between flex-full">
							<view class="item-price">{{item.price}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="aui-books-list">
			<block v-for="(item , index) in CardList" :key="index">
				<view class="aui-flex b-line" @click="Tourl(item.id)">
					<view class="aui-books-img">
						<image :src="item.picture" mode="aspectFit"></image>
					</view>
					<view class="aui-flex-box">
						<view class="name">{{item.name}}</view>
						<view class="price">¥ {{item.price}}</view>
						<view class="use">可用次数：{{item.usable}} 次</view>
					</view>
				</view>
			</block>
		</view> -->
	</view>
</template>

<script>
	import $H from '@/common/js/request.js'
	export default {
		data() {
			return {
				isLogin: '',
				CardList: []
			}
		},
		onLoad() {
			//判断用户是否登录
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
			} else {
				this.isLogin = 1
			}
			this.getCardList();
		},
		methods: {
			getCardList() {
				$H.post('index/vipcardlist', {}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.CardList = res.data;
					}
				})
			},
			Tourl(id) {
				uni.navigateTo({
					url: '/card/detail/index?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 100%;
		padding: 0 24px;
		padding-bottom: 26px;
		box-sizing: border-box;
	}


	.list .item:nth-of-type(1) {
		margin-top: 14px;
	}

	.list .item {
		width: 100%;
		border-radius: 10px;
		background: #fff;
		background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/251720681045U8irdZ.png');
		background-size: 340px 300px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		position: relative;
		margin-top: 26px;
		box-shadow: 0 5px 5px rgba(0, 0, 0, .06);
	}


	.list .item .item-img {
		width: 100%;
		background: #dcdcdc;
		background-size: cover !important;
		border-radius: 31px;
		position: relative;
	}

	.list .item .item-img image {
		width: 100%;
		height: 180px;
		background: #dcdcdc;
		background-size: cover !important;
		border-radius: 10px;
		position: relative;
	}
	
	.vertical {
	    display: flex;
	    flex-direction: column;
	}
	
	.list .item .item-body{
	    padding: 18px 16px 5px;
	    box-sizing: border-box;
	}
	
	.list .item .item-body .item-info{
	    word-wrap: break-word;
	    line-height: 21px;
	}
	
	.list .item .item-body .item-info .item-title{
	    font-size: 18px;
	    color: #0f182e;
	    font-family: fontBold;
	    position: relative;
	    top: -3px;
		font-weight: bold;
	}
	
	.list .item .item-body .tags{
	    height: 21px;
	    border-radius: 3px;
	    overflow: hidden;
	    margin-top: 4px;
	}
	
	.flex-middle {
	    align-items: center;
	}

	.dis-flex {
	    display: flex;
	}
	
	.list .item .item-body .tags .tags-title{
	    height: 100%;
	    padding: 0 5px;
	    box-sizing: border-box;
	    background: linear-gradient(270deg, #fdc658, #fde380);
	    font-size: 12px;
	    color: #0f182e;
	    font-family: fontBold;
	}
	
	.list .item .item-body .tags .tags-num{
	    height: 100%;
	    background: #fff4de;
	    font-size: 12px;
	    color: #0f182e;
	    font-family: fontBold;
	    padding: 0 5px;
	    box-sizing: border-box;
	}
	
	.list .item .item-body .footer .item-price{
	    font-size: 31px;
	    color: #0f182e;
	    font-family: DIN;
	    position: relative;
	    top: -1px;
		font-weight: bold;
	}
	
	.list .item .item-body .footer .item-price::before {
	    content: "￥";
	    font-size: 16px;
	    position: relative;
	    top: -1px;
	    font-family: fontBold;
	}
	
</style>